<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>weibo</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css" />
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const {Component} = React
    const request = axios.create({
        baseURL:'http://127.0.0.1:8081'
    })
    request.interceptors.response.use(response=>{
        const {ok,msg} = response.data
        if (ok===-1){
            alert('请求错误！')
            return new Promise(()=>{})
        }
        return response.data
    })

    class App extends Component{
        content = React.createRef()

        state = {contentList:[],pageNo:1,pageSum:0}
        //添加评论
        add = async ()=>{
            const res = await request.post('/weibo',{content:this.content.current.value})
            console.log(res)
            this.content.current.value = ''
            this.getCommon()
        }

        //获取评论
        getCommon = async ()=>{
            const {pageNo,pageSize} = this.state
            const {contentList,pageSum} = await request.get('/weibo',{params:{pageNo,pageSize}})
            this.setState({contentList,pageSum})

            console.log(pageSum)
        }

        //组件挂载完毕时触发
        componentDidMount(){
            this.getCommon()
        }
        render(){
            const {contentList,pageSum,pageNo} = this.state
            const arr = []
            for(let i = 0;i<pageSum;i++){
                arr.push(<a key={i} href="" className={pageNo===i+1? 'active':''}>{i+1}</a>)
            }
            return (
                    <div className="jyArea">
                        <div className="takeComment">
                            <textarea ref={this.content} name="textarea" className="takeTextField" id="tijiaoText"></textarea>
                            <div className="takeSbmComment">
                                <input onClick={this.add} type="button" className="inputs" value=""/>
                            </div>
                        </div>


                        <div className="commentOn">
                            <div className="noContent" style={{display:contentList.length===0? 'block':'none'}}>暂无留言</div>
                            {
                                contentList.map(item=>{
                                    return (
                                        <div className="messList" key={item._id}>
                                            <div className="reply">
                                                <p className="replyContent">{item.content}</p>
                                                <p className="operation">
                                                    <span className="replyTime">{item.addTime}</span>
                                                    <span className="handle">
                                                        <a href="" className="top">{item.topNum}</a>
                                                        <a href="" className="down_icon">{item.downNum}</a>
                                                        <a href="" className="cut">删除</a>
                                                    </span>
                                                </p>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                            <div className="page">
                                {
                                    arr
                                }
                                {/*<a href="" className="active">1</a>
                                <a href="">2</a>
                                <a href="">3</a>*/}
                            </div>
                        </div>
                    </div>
            )
        }
    }
    
    ReactDOM.createRoot(document.getElementById('root')).render(<App/>)
</script>
</body>

</html>